<template>
<!-- 需要携带以下参数 -->
<!-- ref 用于获取组件触发API -->
<!-- auto-upload 关闭自动上传 -->
<!-- http-request 设置自定义上传的函数 -->
<!-- on-change 图片列表改变时触发的函数 -->
<!-- multiple 允许上传多个文件 -->
    <div>
        <el-upload
            ref="upload"
            :auto-upload="false"
            :http-request="uploadFile"
            :on-change="changeFileLength"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">点击上传文件</div>
        </el-upload>
    <!-- 上传时点击的按钮 -->
        <el-button @click="upload" type="success">开始上传</el-button>
    </div>
</template>

<script>
import { uploadzip } from "@/api/demo/demo"
import JSZip from 'jszip'

    export default {
        name: "uploadCT",
        data(){
            return{
                // 上传文件的列表
                uploadFiles: [],
                // 上传文件的个数
                filesLength: 0,
                // 上传需要附带的信息
                info:{
                    id:"我的附加ID",
                    name:"我的附加姓名",
                },
            }
        },

        methods:{
            // 修改当前文件列表长度
            changeFileLength(file, fileList){
                this.filesLength = fileList.length
                console.log("文件数量："+this.filesLength)
            },

            // 用户点击上传调用
            async upload(){
                // 触发上传 调用配置 :http-request="uploadFile"
                // 即触发 uploadFile函数
                await this.$refs.upload.submit();
                // 上传完成后执行的操作 ...
            },

            // 该函数还是会被调用多次
            // 每次param参数传入一个文件
            uploadFile(param){
                // 将文件加入需要上传的文件列表
                this.uploadFiles.push(param.file)
                // 当uploadFiles长度等于用户需要上传的文件数时进行上传
                if (this.uploadFiles.length == this.filesLength){
                    // 创建FormData上传
                    let fd = new FormData()
                    // 将全部文件添加至FormData中
                    const zip = new JSZip()
                    this.uploadFiles.forEach(item => {
                        zip.file(item.name, item,{ binary: true });                   
                    })
    
                    zip.generateAsync({ type: 'blob' }).then(content => {
                        // 生成二进制流
                        // FileSaver.saveAs(content, '文件下载.zip') // 利用file-saver保存文件  自定义文件名
                        // eslint-disable-next-line no-undef
                        let uuid = this.guid();
                        var fils = new File([content],uuid+'.zip',{type: "zip"});
                        //加密
                        
                        //
                        fd.append('file', fils)
                        //附加信息
                        fd.append("id", this.info.id)
                        fd.append("name", this.info.name)
                        uploadzip(fd).then(res => {
                            /*上传成功处理*/
                        }).catch(err => {/*报错处理*/});
                    })
                }
            },
            guid() {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = Math.random() * 16 | 0,
                        v = c == 'x' ? r : (r & 0x3 | 0x8);            
                    return v.toString(16);
                });
            }
        }
    }
</script>